<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div style="width: 100%; height: 600px" ref="main1"></div>
      </el-col>
      <el-col :span="12">
        <div style="width: 100%; height: 600px" ref="main2"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  initCicle()
  initBar()
})

const main2 = ref({})
const main1 = ref({})
// 饼图
const initCicle = () => {
  var myChart = echarts.init(main1.value)
  myChart.setOption({
    legend: {
      top: 'bottom',
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        /*  dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }, */
      },
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8,
        },
        data: [
          { value: 40, name: 'rose 1' },
          { value: 38, name: 'rose 2' },
          { value: 32, name: 'rose 3' },
          { value: 30, name: 'rose 4' },
          { value: 28, name: 'rose 5' },
          { value: 26, name: 'rose 6' },
          { value: 22, name: 'rose 7' },
          { value: 18, name: 'rose 8' },
        ],
      },
    ],
  })
}

//条形图
const initBar = () => {
  var myChart = echarts.init(main2.value)
  myChart.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
    ],
  })
}
</script>
